<template>
  <div
    style="display: flex; flex-direction: column"
    :style="{
      height: currentHeight + 'px',
    }"
  >
    <div
      style="
        width: 400px;
        background: blue;
        color: white;
        height: 20px;
        text-align: center;
        line-height: 20px;
        padding: 5px 0;
      "
    >
      组件样式
    </div>
    <div
      style="
        width: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        align-items: center;
        justify-content: center;
        background: black;
        color: white;
      "
    >
    <div style="display: flex; align-items: center; margin-top: 20px;height:30px;">
        <div style="width: 80px">延时</div>
        <div
          disabled
          type="text"
          style="width: 110px;background:grey;overflow:hidden;"
          
        >{{delay}}</div>
      </div>
      <div style="display: flex; align-items: center">
        <div style="width: 80px">组件类型</div>
        <select disabled style="width: 115px" v-model="componentType">
          <option value="BUTTON">按钮</option>
          <option value="SWITCH">开关</option>
          <option value="SLIDER">滑块</option>
          <option value="IMAGE">图片</option>
          <option value="TEXTVIEW">文本框</option>
          <option value="VIDEO">流媒体</option>
          <option value="WEBPAGE">网页</option>
        </select>
      </div>
      <div style="display: flex; align-items: center; margin-top: 20px">
        <div style="width: 80px">组件序号</div>
        <div
          
          type="text"
          style="width: 110px;background:grey;overflow:hidden; height: 20px;"
        >{{componentId}}</div>
      </div>
      <div style="display: flex; align-items: center; margin-top: 20px">
        <div style="width: 80px">顶部</div>
        <div  type="text" style="width: 110px;background:grey;overflow:hidden; height: 20px;"  >{{y}}</div>
      </div>
      <div style="display: flex; align-items: center; margin-top: 20px">
        <div style="width: 80px">左侧</div>
        <div  type="text" style="width: 110px;background:grey;overflow:hidden; height: 20px;"  >{{x}}</div>
      </div>
      <div style="display: flex; align-items: center; margin-top: 20px">
        <div style="width: 80px">宽度</div>
        <div  type="text" style="width: 110px;background:grey;overflow:hidden; height: 20px;"  >{{w}}</div>
      </div>
      <div style="display: flex; align-items: center; margin-top: 20px">
        <div style="width: 80px">高度</div>
        <div  type="text" style="width: 110px;background:grey;overflow:hidden; height: 20px;"  >{{h}}</div>
      </div>
      <div style="display: flex; align-items: center; margin-top: 20px">
        <div style="width: 80px">层级</div>
        <div  type="text" style="width: 110px;background:grey;overflow:hidden; height: 20px;"  >{{z}}</div>
      </div>
      <!-- 按钮 -->
      <div
        v-if="componentType == 'BUTTON'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">字体颜色</div>
        <div disabled type="text" style="width: 110px;background:grey;overflow:hidden; height: 20px;"  >{{fontColor}}</div>
      </div>
      <div
        v-if="componentType == 'BUTTON'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">字体大小</div>
        <div disabled type="text" style="width: 110px;background:grey;overflow:hidden; height: 20px;"  >{{fontSize}}</div>
      </div>
      <div
        v-if="componentType == 'BUTTON'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">简体中文</div>
        <div
          disabled
          type="text"
          style="width: 110px;background:grey;overflow:hidden; height: 20px;"
          
        >{{textChinese}}</div>
      </div>
      <div
        v-if="componentType == 'BUTTON'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">繁体中文</div>
        <div
          disabled
          type="text"
          style="width: 110px;background:grey;overflow:hidden; height: 20px;"
          
        >{{textTraditional}}</div>
      </div>
      <div
        v-if="componentType == 'BUTTON'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">English</div>
        <div
          disabled
          type="text"
          style="width: 110px;background:grey;overflow:hidden; height: 20px;"
          
        >{{textEnglish}}</div>
      </div>
      <div
        v-if="componentType == 'BUTTON'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">背景颜色</div>
        <div
          disabled
          type="text"
          style="width: 110px;background:grey;overflow:hidden; height: 20px;"
         
        >{{backgroundColor}}</div>
      </div>
      <div
        v-if="componentType == 'BUTTON'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">背景图片</div>
        <div disabled type="text" style="width: 110px;background:grey;overflow:hidden; height: 20px;"  >{{background}}</div>
      </div>
      <!-- 按钮end -->
      <!-- 开关 -->
      <div
        v-if="componentType == 'SWITCH'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">激活颜色</div>
        <div
          disabled
          type="text"
          style="width: 110px;background:grey;overflow:hidden; height: 20px;"
          
        >{{activeColor}}</div>
      </div>
      <div
        v-if="componentType == 'SWITCH'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px;background:grey;overflow:hidden;">未激活颜色</div>
        <div
          disabled
          type="text"
          style="width: 110px;background:grey;overflow:hidden; height: 20px;"
          
        >{{unActiveColor}}</div>
      </div>
      <!-- 开关end -->
      <!-- 滑块 -->
      <div
        v-if="componentType == 'SLIDER'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">轨道样式</div>
      </div>
      <div
        v-if="componentType == 'SLIDER'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">背景颜色</div>
        <div
          disabled
          type="text"
          style="width: 110px;background:grey;overflow:hidden; height: 20px;"
          
        >{{railBackground}}</div>
      </div>
      <div
        v-if="componentType == 'SLIDER'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">进度颜色</div>
        <div
          disabled
          type="text"
          style="width: 110px;background:grey;overflow:hidden; height: 20px;"
          
        >{{railProgressColor}}</div>
      </div>
      <div
        v-if="componentType == 'SLIDER'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">边框宽度</div>
        <div
          disabled
          type="text"
          style="width: 110px;background:grey;overflow:hidden; height: 20px;"
          
        >{{railBorderWidth}}</div>
      </div>
      <div
        v-if="componentType == 'SLIDER'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">边框颜色</div>
        <div
          disabled
          type="text"
          style="width: 110px;background:grey;overflow:hidden; height: 20px;"
          
        >{{railBorderColor}}</div>
      </div>
      <div
        v-if="componentType == 'SLIDER'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">边框圆角</div>
        <div
          disabled
          type="text"
          style="width: 110px;background:grey;overflow:hidden; height: 20px;"
          
        >{{railBorderRoundCorner}}</div>
      </div>
      <div
        v-if="componentType == 'SLIDER'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">滑块样式</div>
      </div>
      <div
        v-if="componentType == 'SLIDER'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">背景图片</div>
        <div
          disabled
          type="text"
          style="width: 110px;background:grey;overflow:hidden; height: 20px;"
          
        >{{sliderBackground}}</div>
      </div>
      <div
        v-if="componentType == 'SLIDER'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">长度</div>
        <div
          disabled
          type="text"
          style="width: 110px;background:grey;overflow:hidden; height: 20px;"
         
        >{{sliderWidth}}</div>
      </div>
      <div
        v-if="componentType == 'SLIDER'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">高度</div>
        <div
          disabled
          type="text"
          style="width: 110px;background:grey;overflow:hidden; height: 20px;"
          
        >{{sliderHeight}}</div>
      </div>
      <div
        v-if="componentType == 'SLIDER'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">上边距</div>
        <div
          disabled
          type="text"
          style="width: 110px;background:grey;overflow:hidden; height: 20px;"
          
        >{{sliderMarginTop}}</div>
      </div>
      <div
        v-if="componentType == 'SLIDER'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">下边距</div>
        <div
          disabled
          type="text"
          style="width: 110px;background:grey;overflow:hidden; height: 20px;"
          
        >{{sliderMarginBottom}}</div>
      </div>
      <div
        v-if="componentType == 'SLIDER'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">左边距</div>
        <div
          disabled
          type="text"
          style="width: 110px;background:grey;overflow:hidden; height: 20px;"
          
        >{{sliderMarginLeft}}</div>
      </div>
      <div
        v-if="componentType == 'SLIDER'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">右边距</div>
        <div
          disabled
          type="text"
          style="width: 110px;background:grey;overflow:hidden; height: 20px;"
          
        >{{sliderMarginRight}}</div>
      </div>
      <!-- 滑块end -->
      <!-- 图片 -->
      <div
        v-if="componentType == 'IMAGE'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">背景图片</div>
        <div disabled type="text" style="width: 110px;background:grey;overflow:hidden; height: 20px;"  >{{src}}</div>
      </div>
      <!-- 图片end -->
      <!-- 文本框 -->
      <div
        v-if="componentType == 'TEXTVIEW'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">字体颜色</div>
        <div disabled type="text" style="width: 110px;background:grey;overflow:hidden; height: 20px;"  >{{fontColor}}</div>
      </div>
      <div
        v-if="componentType == 'TEXTVIEW'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">字体大小</div>
        <div disabled type="text" style="width: 110px;background:grey;overflow:hidden; height: 20px;"  >{{fontSize}}</div>
      </div>
      <div
        v-if="componentType == 'TEXTVIEW'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">简体中文</div>
        <div disabled type="text" style="width: 110px;background:grey;overflow:hidden; height: 20px;"  >{{textValue}}</div>
      </div>
      <div
        v-if="componentType == 'TEXTVIEW'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">繁体中文</div>
        <div
          disabled
          type="text"
          style="width: 110px;background:grey;overflow:hidden; height: 20px;"
          
        >{{traditionalTextValue}}</div>
      </div>
      <div
        v-if="componentType == 'TEXTVIEW'"
        style="display: flex; align-items: center; margin-top: 20px"
      >
        <div style="width: 80px">English</div>
        <div
          disabled
          type="text"
          style="width: 110px;background:grey;overflow:hidden; height: 20px;"
         
        >{{englishTextValue}}</div>
      </div>
      <!-- 文本框end -->
    </div>
  </div>
</template>

<script>
export default {
  name: "ComponentStyleComponent",
  inject: ["getNode"],
  data() {
    return {
      componentType: null,
      componentId: null,
      y: null,
      x: null,
      w: null,
      h: null,
      z: null,
      fontColor: null,
      textChinese: null,
      textTraditional: null,
      textEnglish: null,
      backgroundColor: null,
      background: null,
      currentHeight: 450,
      activeColor: null,
      unActiveColor: null,
      railBackground: null,
      railProgressColor: null,
      railBorderWidth: null,
      railBorderColor: null,
      railBorderRoundCorner: null,
      sliderBackground:null,
      sliderWidth: null,
      sliderHeight: null,
      sliderMarginTop: null,
      sliderMarginBottom: null,
      sliderMarginLeft: null,
      sliderMarginRight: null,
      src: null,
      textValue: null,
      traditionalTextValue: null,
      englishTextValue: null,
      fontSize:null,
      delay:0
    };
  },
  methods: {},
  watch: {},
  mounted() {
    const self = this;
    const node = this.getNode();
    node.on("change:data", ({ current }) => {
      
      if (current === undefined) {
        self.componentType = null;
        self.componentId = null;
        self.y = null;
        self.x = null;
        self.w = null;
        self.h = null;
        self.z = null;
        self.fontColor = null;
        self.textChinese = null;
        self.textTraditional = null;
        self.textEnglish = null;
        self.backgroundColor = null;
        self.background = null;
        self.currentHeight = 450;
        self.activeColor = null;
        self.unActiveColor = null;
        self.railBackground = null;
        self.railProgressColor = null;
        self.railBorderWidth = null;
        self.railBorderColor = null;
        self.railBorderRoundCorner = null;
        self.sliderBackground=null;
        self.sliderWidth = null;
        self.sliderHeight = null;
        self.sliderMarginTop = null;
        self.sliderMarginBottom = null;
        self.sliderMarginLeft = null;
        self.sliderMarginRight = null;
        self.src = null;
        self.textValue = null;
        self.traditionalTextValue = null;
        self.englishTextValue = null;
        self.fontSize = null;
        self.delay = 0;
        return;
      }
      self.componentType = current.componentType;
      self.componentId = current.componentId;
      self.y = current.y;
      self.x = current.x;
      self.w = current.w;
      self.h = current.h;
      self.z = current.z;
      self.fontColor = current.fontColor;
      self.textChinese = current.textChinese;
      self.textTraditional = current.textTraditional;
      self.textEnglish = current.textEnglish;
      self.backgroundColor = current.backgroundColor;
      self.background = current.background;
      self.currentHeight = current.currentHeight;
      self.activeColor = current.activeColor;
      self.unActiveColor = current.unActiveColor;
      self.railBackground = current.railBackground;
      self.railProgressColor = current.railProgressColor;
      self.railBorderWidth = current.railBorderWidth;
      self.railBorderColor = current.railBorderColor;
      self.railBorderRoundCorner = current.railBorderRoundCorner;
      self.sliderBackground=current.sliderBackground;
      self.sliderWidth = current.sliderWidth;
      self.sliderHeight = current.sliderHeight;
      self.sliderMarginTop = current.sliderMarginTop;
      self.sliderMarginBottom = current.sliderMarginBottom;
      self.sliderMarginLeft = current.sliderMarginLeft;
      self.sliderMarginRight = current.sliderMarginRight;
      self.src = current.src;
      self.textValue = current.textValue;
      self.traditionalTextValue = current.traditionalTextValue;
      self.englishTextValue = current.englishTextValue;
      self.fontSize = current.fontSize
      self.delay = current.delay
      console.log(current);
    });
  },
};
</script>

<style>
</style>